<template>
  <div>
    <div class="article-item">
        <van-cell :to="`/article/${article.art_id}`">
            <div slot="title" class="title van-multi-ellipsis--l2">{{article.title}}</div>
            <div slot="label">
                <div v-if="(article.cover.type === 3)" class="cover-wrap">
                   <div class="cover-item" 
                        v-for="(item,index) in article.cover.images" 
                        :key="index">
                        <van-image
                            class="zj-img"
                            slot="default"
                            fit="cover"
                            :src="item"
                        />
                   </div>
                </div>
                <div  class="pl-title">
                    <span>{{article.aut_name}}</span>
                    <span>{{article.comm_count}}评论</span>
                    <span>{{article.pubdate | dayFn}}</span>
                </div>
            </div>
             <van-image
               v-if="(article.cover.type === 1)"
                    slot="default"
                    class="right-cover"
                    fit="cover"
                    :src="article.cover.images[0]"
             />
        </van-cell>
    </div>
  </div>
</template>

<script>
export default {
    name:'ArticleItem',
    props:{
        article:{
            type: Object,
            required: true
        }
        
    }
}
</script>
<style lang="less" scoped>
    .article-item{
        .title{
            font-size: 32px;
            color:#3a3a3a
        }
        .van-cell__value{
            flex: unset;
            width: 232px;
            height: 146px;
            padding-left: 25px;
        }
        .right-cover{
            width: 232px;
            height: 146px;
        }
        .pl-title{
            font-size: 22px;
            color: #b4b4b4;
            span{
                margin-right: 25px;
            }
        }
        .cover-wrap{
            display: flex;
            padding: 30px 0;
            .cover-item{
                flex: 1;
                height: 146px;
                &:not(:last-child){
                    padding-right: 4px;
                }
                .zj-img{
                    width: 100%;
                    height: 146px;
                }
            }
        }

    }
</style>